<template>
    <div class="table-container">
        <!-- 搜索区域 -->
        <Search :search-config="searchConfig" @search="handleSearch" @reset="resetSearch" />

        <!-- 表格区域 -->
        <TableData :table-data="tableData" :columns="columns" @edit="handleEdit" @delete="handleDelete" />

        <!-- 分页组件 -->
        <Pagination v-model:page="currentPage" v-model:limit="pageSize" :total="total" @pagination="handlePagination" />
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import Pagination from '../../components/Pagination/index.vue'
import Search from '../../components/Search/index.vue'
import TableData from '../../components/TableData/index.vue'
// 表格数据
const tableData = ref([
    {
        id: 1,
        name: '张三',
        age: 25,
        address: '北京市朝阳区'
    },
    {
        id: 2,
        name: '李四',
        age: 30,
        address: '上海市浦东新区'
    },
    {
        id: 3,
        name: '王五',
        age: 30,
        address: '南昌市'
    }
])
// 表格列配置
const columns = [
    {
        prop: 'id',
        label: 'ID',
        width: '80'
    },
    {
        prop: 'name',
        label: '姓名',
        width: '120'
    },
    {
        prop: 'age',
        label: '年龄',
        width: '80'
    },
    {
        prop: 'address',
        label: '地址'
    }
]
// 分页相关
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(100)

// 搜索配置
const searchConfig = [
    {
        field: 'name',
        label: '姓名',
        type: 'input',
        placeholder: '请输入姓名'
    },
    {
        field: 'age',
        label: '年龄段',
        type: 'select',
        placeholder: '请选择年龄段',
        options: [
            { label: '18岁以下', value: '0-18' },
            { label: '18-30岁', value: '18-30' },
            { label: '30-50岁', value: '30-50' },
            { label: '50岁以上', value: '50+' }
        ]
    },
    {
        field: 'address',
        label: '地址',
        type: 'input',
        placeholder: '请输入地址'
    }
]

// 搜索方法
const handleSearch = (searchParams) => {
    console.log('搜索条件：', searchParams)
    // 这里添加实际的搜索逻辑
}

// 重置搜索
const resetSearch = () => {
    console.log('重置搜索')
    // 重置后的其他操作
}

// 编辑方法
const handleEdit = (row) => {
    console.log('编辑：', row)
}

// 删除方法
const handleDelete = (row) => {
    console.log('删除：', row)
}

// 处理分页变化
const handlePagination = ({ page, limit }) => {
    console.log('页码：', page, '每页条数：', limit)
    // 这里添加获取数据的逻辑
}
</script>

<style scoped>
.table-container {
    padding: 20px;
}

.search-form {
    margin-bottom: 20px;
}
</style>